import React from 'react';
import {
    Row,
    Col,
    Form,
} from 'antd';
import { Input } from 'antd';
import { Link, hashHistory } from 'dva/router';
import './style.less';
const FormItem = Form.Item;
class Index extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: true,
            user: user,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            keyword: '',
            isInterior: new RegExp('省级客服角色').test(user.Roles)

        };
    };
    componentDidMount() {

    }
    query = () => {
        hashHistory.push(
            this.state.isInterior ? `orderinfo?order=${this.props.form.getFieldsValue().CompilePathDescribe}` : `busticket?order=${this.props.form.getFieldsValue().CompilePathDescribe}`
        )
    }

    listone(backgroundColor) {
        let listone = {
            display: 'block',
            margin: '0 auto',
            // width: '240px',
            // color: '#fff',
            // borderRadius: '6px',
            // textAlign: 'center',
            // lineHeight: '100px',
            // backgroundColor: backgroundColor
        }
        return listone
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        let listimg = {
            width: '100%',
            height: '100%',
            verticalAlign: 'middle',
            marginTop: '-5px'
        }
        let menuItem = {
            display: 'inline-block',
            fontSize: '16px',
            marginLeft: '20px'
        }
        let divStyle = {
            background: 'transparent',
            border: '0',
            marginTop: '50px',
            marginBottom: '50px'
        }

        const userRoles = localStorage.getItem("roles") == null ? '' : localStorage.getItem("roles");
        return (
            <div>

                {
                    userRoles.indexOf("汽车站运维角色") > -1 ? (
                        <div>
                            <div
                                style={{
                                    textAlign: 'center',
                                    margin: 10
                                }}>

                                <Form>
                                    <FormItem>
                                        {getFieldDecorator('CompilePathDescribe')
                                            (<Input style={{ width: '70%', height: '38px' }} placeholder="请输入订单号" onPressEnter={this.query} />)}
                                        <Link ref="queryBtn" className="menusearch" to={this.state.isInterior ? `orderinfo?order=${this.props.form.getFieldsValue().CompilePathDescribe}` : `busticket?order=${this.props.form.getFieldsValue().CompilePathDescribe}`} >查询订单</Link>
                                    </FormItem>

                                </Form>
                            </div>

                            <div style={divStyle}>
                                <Row gutter={16}>
                                    <Col span={6}>
                                        <div>
                                            <Link style={this.listone('#2ec9b1')} rel="noopener noreferrer" to={`/breakstation`}>
                                                <img style={listimg} src={require("../image/1.png")} alt="" />
                                                {/* <span style={menuItem}>自助机错误</span> */}
                                            </Link></div>
                                    </Col>
                                    <Col span={6}>
                                        <div>
                                            <Link style={this.listone('#59c0de')} rel="noopener noreferrer" to={`/orderinfo`}>
                                                <img style={listimg} src={require("../image/2.png")} alt="" />
                                                {/* <span style={menuItem}>订单查询</span> */}
                                            </Link></div>
                                    </Col>
                                    <Col span={6}>
                                        <div>
                                            <Link style={this.listone('#efad4d')} rel="noopener noreferrer" to={`/dailyreport`}>
                                                <img style={listimg} src={require("../image/3.png")} alt="" />
                                                {/* <span style={menuItem}>每日报表</span> */}
                                            </Link></div>
                                    </Col>
                                    <Col span={6}>
                                        <div>
                                            <Link style={this.listone('#2cbf6e')} rel="noopener noreferrer" to={`/refund`}>
                                                <img style={listimg} src={require("../image/4.png")} alt="" />
                                                {/* <span style={menuItem}>退款管理</span> */}
                                            </Link></div>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    ) : ''
                }

                <div style={{ marginBottom:'20px',marginTop: '-20px'}}>
                    <div className="dingzhi">
                        <div className="title">定制客运</div>
                        <div className="often"><Link className="oftenColor" to="/customOrder">订单信息</Link></div>
                        <div className="often"><Link className="oftenColor" to="/customLineInfo">线路管理</Link></div>
                        <div className="often"><Link className="oftenColor" to="/customBusPlan">运行班次</Link></div>
                    </div>

                    <div className="yuezu">
                        <div className="title">城际约租</div>
                        <div className="often"><Link className="oftenColor" to="/rentOrder">订单信息</Link></div>
                        <div className="often"><Link className="oftenColor" to="/rentPath">线路管理</Link></div>
                        <div className="often"><Link className="oftenColor" to="/rentBill">电话录单</Link></div>
                    </div>
                </div>

            </div>
        )
    }

}
const Home = Form.create()(Index);
export default Home
